﻿@{
    Layout = null;
}
@*红包*@
<style>
    .form-horizontal .form-group {
        margin-bottom: 15px;
        margin-top: 15px;
    }
    .money .btn{
        margin-top:5px;
    }
    .money .customizeMoney {
        margin-left: 5px;
    }
   input.btn{
       width:60px;
   }
</style>
<div>

    <ul class="myTabs nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#LuckyRP" id="LuckyRP-tab" class="RedPacket" role="tab" data-toggle="tab" aria-controls="LuckyRP" aria-expanded="true">拼手气红包</a>
        </li>
        <li role="presentation" class="">
            <a href="#NormalRP" role="tab" id="NormalRP-tab" class="RedPacket" data-toggle="tab" aria-controls="NormalRP" aria-expanded="false">普通红包</a>
        </li>
    </ul>

    <div class="tab-content">
        <form onkeydown="if(event.keyCode==13){return false;}" role="tabpanel" class="tab-pane fade active in form-horizontal" id="LuckyRP" aria-labelledby="LuckyRP-tab">
            <!--拼手气红包-->
            <input type="hidden" name="CouponType" id="PacketType" value="0" />
            <input type="hidden" name="type" value="1" />

            <div class="form-group">
                <label class="col-md-2 text-right"><span class="red-600">*</span>红包名称：</label>
                <div class="col-md-7">
                    <input type="text" name="Name" class="form-control" />
                </div>
                <div class="col-md-3"></div>
            </div>
            <div class="form-group special">
                <label class="col-md-2 text-right"><span class="red-600">*</span>最小红包：</label>
                <div class="col-md-7">
                    <input type="text" name="MinDenomination" class="form-control" value="" placeholder="保留最多两位小数如 1.00" />

                </div>
                <div class="col-md-3">元</div>
            </div>


            <div class="form-group">
                <label class="col-md-2 text-right"><span class="red-600">*</span>最大红包：</label>
                <div class="col-md-7">
                    <input type="text" name="MaxDenomination" class="form-control" value="" placeholder="保留最多两位小数如 2.00" />
                </div>
                <div class="col-md-3">元</div>
            </div>

            <div class="form-group">
                <label class="col-md-2 text-right"><span class="red-600">*</span>发放总量：</label>
                <div class="col-md-7">
                    <input type="text" name="TotalNums" class="form-control" />
                </div>
                <div class="col-md-3">个</div>
            </div>


            <div class="form-group">
                <label class="col-md-2 text-right">预计金额：</label>
                <div class="col-md-7">
                    <input type="text" readonly="readonly" name="TMoney" class="form-control" />
                    <input type="hidden" name="TotalMoney" id="TotalMoney" />
                    <input type="hidden" name="Denomination" id="Denomination" />
                </div>
                <div class="col-md-3">元</div>
            </div>

            <div class="form-group">
                <label class="col-md-2 text-right">备注：</label>
                <div class="col-md-7">
                    <input type="text" name="Remark" class="form-control" />
                </div>
            </div>
        </form>
        <form onkeydown="if(event.keyCode==13){return false;}" role="tabpanel" class="tab-pane form-horizontal" id="NormalRP" aria-labelledby="NormalRP-tab">
            <!--普通红包-->
            <input type="hidden" name="CouponType" id="PacketType" value="1" />
            <input type="hidden" name="type" value="1" />
            <div class="form-group">
                <div class="col-md-2 text-right"><span class="red-600">*</span>红包名称：</div>
                <div class="col-md-7">
                    <input type="text" name="Name" class="form-control" />
                </div>
                <div class="col-md-3"></div>
            </div>
            <div class="form-group money" style="display:flex;align-items:center">
                <div class="col-md-2 text-right">红包面额：</div>
                <div class="col-md-10 ">
                    <span class="btn btn-default active-normal" data-id="customizeBtn" onclick="customizeMoney(this)">自定义金额</span>
                    <input style="display:none" type="text" id="customizeInput" class="btn btn-default active-normal" autofocus onblur="customizeBlur(this)" />
                    <span class="btn btn-success active-money" data-id="1">1元</span>
                    <span class="btn btn-default active-normal" data-id="3">3元</span>
                    <span class="btn btn-default active-normal" data-id="5">5元</span>
                    <span class="btn btn-default active-normal" data-id="10">10元</span>
                    <span class="btn btn-default active-normal" data-id="15">15元</span>
                    <span class="btn btn-default active-normal" data-id="20">20元</span>
                </div>
                <input type="hidden" name="Denomination" id="redDen" value="1" />
            </div>
            <div class="form-group">
                <div class="col-md-2 text-right"><span class="red-600">*</span>发放总量：</div>
                <div class="col-md-7">
                    <input type="number" name="TotalNums" class="form-control" onchange="CalcTotalNums(this)" onkeyup="CalcTotalNums(this)" />
                </div>
                <div class="col-md-3">个</div>
            </div>
            <div class="form-group">
                <div class="col-md-2 text-right">预备金额：</div>
                <div class="col-md-7">
                    <input readonly="readonly" type="text" class="form-control" name="TotalMoney" />
                </div>
                <div class="col-md-3">元</div>
            </div>
            <div class="form-group">
                <div class="col-md-2 text-right">备注：</div>
                <div class="col-md-7">
                    <input type="text" name="Remark" class="form-control" />
                </div>

            </div>
        </form>

</div>
</div>
<script>
    $('#LuckyRP .col-md-7 input[name="TotalNums"]').bind('keyup blur', function () {
        if ($(this).val() != '') {
            var MinMoney = parseFloat($('#LuckyRP .col-md-7 input[name="MinDenomination"]').val() * $(this).val());
            var TotalMoney = parseFloat($('#LuckyRP .col-md-7 input[name="MaxDenomination"]').val() * $(this).val());
            $('#LuckyRP .col-md-7 input[name="TMoney"]').val(MinMoney + ' ~ ' + TotalMoney).next().val(TotalMoney).next().val($('#LuckyRP .col-md-7 input[name="MaxDenomination"]').val());
        }
    })
  

    $('#LuckyRP .col-md-7 input[name="MinDenomination"]').keyup(function () {
        var TotalNums = $('#LuckyRP .col-md-7 input[name="TotalNums"]').val();
        var TotalMoney = parseFloat($('#LuckyRP .col-md-7 input[name="MaxDenomination"]').val() * TotalNums);
        if (TotalNums != '') {
            $('#LuckyRP .col-md-7 input[name="TMoney"]').val(parseFloat(TotalNums) * parseFloat($(this).val()) + ' ~ ' + TotalMoney).next().val(TotalMoney).val($('#LuckyRP .col-md-7 input[name="MaxDenomination"]').val());
        }
    })

    $('#LuckyRP .col-md-7 input[name="MaxDenomination"]').keyup(function () {
        var TotalNums = $('#LuckyRP .col-md-7 input[name="TotalNums"]').val();
        var TotalMoney = parseFloat($('#LuckyRP .col-md-7 input[name="MinDenomination"]').val() * TotalNums);
        if (TotalNums != '') {
            $('#LuckyRP .col-md-7 input[name="TMoney"]').val(TotalMoney + ' ~ ' + parseInt(TotalNums) * parseFloat($(this).val())).next().val(parseFloat(TotalNums) * parseFloat($(this).val())).val($('#LuckyRP .col-md-7 input[name="MaxDenomination"]').val());
          
        }
    })

    $('#LuckyRP .col-md-7 input[name="MinDenomination"]').blur(function () {
        var MaxDenomination = $('#LuckyRP .col-md-7 input[name="MaxDenomination"]').val();
        if (parseFloat($(this).val()) > parseFloat(MaxDenomination)) {
            $.L.msgError('最小红包不能大于最大红包！');
        }
    })
    $('#LuckyRP .col-md-7 input[name="MaxDenomination"]').blur(function () {
        var MaxDenomination = $('#LuckyRP .col-md-7 input[name="MinDenomination"]').val();
        if (parseFloat($(this).val()) < parseFloat(MaxDenomination)) {
            $.L.msgError('最大红包必须大于最小红包！');
        }
    })

    //选择金额
    $('#NormalRP div.form-group.money').on('click', '.btn', function () {
        $(this).siblings().removeClass('btn-success').addClass('btn-default');
        $(this).removeClass('btn-default').addClass('btn-success');
  
        $("#redDen").val($(this).data("id"));
        var TotalNums = $('#NormalRP .col-md-7 input[name="TotalNums"]').val();

        if ($(this).data("id") != 'customizeBtn') {
            if (TotalNums != '') {
                $('#NormalRP .col-md-7 input[name="TotalMoney"]').val(parseInt(TotalNums) * parseInt($(this).data("id")));
            }
        }
    });

    //$('#NormalRP .col-md-7 input[name="TotalNums"]').keyup(function () {
    //    if($(this).val()!='')
    //    {
    //        var TotalMoney = parseInt($('#NormalRP .col-md-10 .btn.btn-success').data("id")) * $(this).val();
    //        $('#NormalRP .col-md-7 input[name="TotalMoney"]').val(TotalMoney);
    //    }
    //})

    //计算总数额
    function CalcTotalNums(ele) {
        if ($(ele).val() != '') {
            var TotalMoney = parseInt($('#NormalRP .col-md-10 .btn.btn-success').data("id")) * $(ele).val();
            $('#NormalRP .col-md-7 input[name="TotalMoney"]').val(TotalMoney);
        }
    }
    //自定义金额
    function customizeMoney(ele) {
        $(ele).next('#customizeInput').css('display', 'inline-block').focus();
        $('#NormalRP .col-md-7 input[name="TotalNums"]').val('');
        $('#NormalRP .col-md-7 input[name="TotalMoney"]').val('')
    }
    function customizeBlur(ele) {
        if($(ele).val()>=1)
        {
            $(ele).siblings().removeClass('btn-success').addClass('btn-default');
            var span = '<span class="btn btn-success active-normal customizeMoney" data-id="' + ele.value + '">' + ele.value + '元</span>';
            $("#redDen").val(ele.value);
            $(ele).val('').css('display', 'none').after(span);
        }
        else {
            $(ele).val('').css('display', 'none');
            $.L.msgError('自定义金额不能小于1元！');
        }
    }
    





    $('#LuckyRP').bootstrapValidator({

        fields: {
           
            Name: {
                validators: {
                    notEmpty: {
                        message: '红包名称不能为空'
                    },
                }
            },
            MinDenomination: {
                validators: {
                    notEmpty: {
                        message: '最小红包不能为空'
                    },
                    regexp: {
                        regexp: /^[1-9]\d*(\.[0-9]{0,2})?$/,
                        message: '请输入大于0且小数位最大为两位的数值'
                    }
                }
            },
            MaxDenomination: {
                validators: {
                    notEmpty: {
                        message: '最大红包不能为空'
                    },
                    regexp: {
                        regexp: /^[1-9]\d*(\.[0-9]{0,2})?$/,
                        message: '请输入大于0且小数位最大为两位的数值'
                    }
                }
            },
          
          
            TotalNums: {
                validators: {
                    notEmpty: {
                        message: '发放数量不能为空'
                    },
                    regexp: {
                        regexp: /^[1-9]\d*$/,
                        message: '请输入大于0的整数'
                    }
                }
            },
        }
    });


    $('#NormalRP').bootstrapValidator({

        fields: {
         
            Name: {
                validators: {
                    notEmpty: {
                        message: '红包名称不能为空'
                    },
                }
            },
           

            TotalNums: {
                validators: {
                    notEmpty: {
                        message: '发放数量不能为空'
                    },
                    regexp: {
                        regexp: /^[1-9]\d*$/,
                        message: '请输入大于0的整数'
                    }
                }
            },
      


        }
    });
</script>

 
